<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script src="../../js/vue.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/dayjs.min.js"></script>
    <link rel="stylesheet" href="../../plugins/element_UI/index.css">
    <script src="../../plugins/element_UI/index.js"></script>
</head>
<style>
    .el-table .warning-row {
        background: #f9c855;
    }

    .el-table .error-row {
        background: #909399;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input, .el-date-editor--timerange.el-input__inner {
        width: 225px;
    }

    .el-input__inner {
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 32px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        width: 100%;
    }
    .el-table .cell {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 15px;
        padding-right: 0px;
    }
    #page {
        height: 40px;
        line-height: 40px;
        position: fixed;
        bottom: 34px;
        width: 100%;
        text-align: start;
        /*background: #393D49;*/
        color: #fff;
        font-family: Arial;
        font-size: 12px;
        letter-spacing: 1px;
    }

</style>
<body>
<div id="app">
    <div>
        <el-row class="el-search-row-d" style="margin-right: auto">
            <template>
                <el-radio v-model="status" label="1" @change="init">注销</el-radio>
                <el-radio v-model="status" label="0" @change="init">正常</el-radio>
                <el-radio v-model="status" label="2" @change="init">全部</el-radio>
            </template>
            <el-input
                    placeholder="医生姓名模糊查找"
                    v-model="doctorName"
                    style="width: fit-content"
                    clearable
                    @keyup.native="chinese">
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="init">搜索</el-button>
            <!--        <el-button type="primary" @click="dialogFormVisible = true">添加</el-button>-->
            <el-button type="primary" @click="upload">省平台上传<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="primary" @click="extractHisData">抽取医生数据</el-button>

            <el-button type="primary" @click="jktUpload">健康通上传<i class="el-icon-upload el-icon--right"></i></el-button>

            <el-checkbox v-model="sync" @change="init">不同步</el-checkbox>
        </el-row>
    </div>

    <el-dialog :close-on-click-modal="false" :destroy-on-close="true" title="添加/修改" width="50%"
               :visible.sync="dialogFormVisible"
               @close="closeDiglog">
        <el-container>
            <el-container style="width: 100%">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" style="width: 100%">
                    <el-form-item label="所属医院" prop="hospitalId">
                        <el-select v-model="ruleForm.hospitalId" filterable placeholder="请选择" :disabled="true">
                            <el-option
                                    v-for="item in hospitals"
                                    :key="item.id"
                                    :label="item.hosName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-row>
                        <el-col>
                            <el-form-item label="所属科室" prop="depId">
                                <el-select v-model="ruleForm.depId" filterable placeholder="请选择">
                                    <el-option
                                            v-for="item in departments"
                                            :key="item.id"
                                            :label="item.depName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="医生姓名" prop="doctorName" style="width: 300px">
                                <el-input v-model="ruleForm.doctorName" type="text" placeholder="请输入医生姓名" maxlength="20"
                                          show-word-limit @keyup.native="chinese" :disabled="true"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col>
                            <el-form-item label="性别" prop="doctorSex" style="width: 600px" :disabled="true">
                                <el-radio  disabled v-model="ruleForm.doctorSex+''" label="男">男</el-radio>
                                <el-radio  disabled v-model="ruleForm.doctorSex+''" label="女">女</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="预约开放渠道" prop="doctorSex" style="width: 600px" :disabled="true">
                                <el-radio   v-model="ruleForm.doctorPracticeScope" label="1">自有渠道</el-radio>
                                <el-radio   v-model="ruleForm.doctorPracticeScope" label="0">全部</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>

<!--                    <el-row>-->
<!--                        <el-col>-->
<!--                            <el-form-item label="医师级别" prop="doctorDocGrade" style="width: 100%">-->
<!--                                <el-select v-model="ruleForm.doctorDocGrade" placeholder="请选择">-->
<!--                                    <el-option-->
<!--                                            v-for="doctorDocGrade in doctorDocGrades"-->
<!--                                            :key="doctorDocGrade.id"-->
<!--                                            :label="doctorDocGrade.dicName"-->
<!--                                            :value="doctorDocGrade.id">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->

<!--                    </el-row>-->

                    <el-row>
                        <el-col>
                            <el-form-item label="医师执业证书编码" prop="doctorPracticeCode" style="width: 70%">
                                <el-input v-model="ruleForm.doctorPracticeCode" type="textarea"
                                          placeholder="请输入医师执业证书编码"
                                          maxlength="50"
                                          show-word-limit
                                          @keyup.native="chinese"></el-input>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item label="医生职称" prop="doctorProfessional" style="width: 70%">
                                <el-select v-model="ruleForm.doctorProfessional" filterable placeholder="请选择医生职称">
                                    <el-option
                                            v-for="doctorProfessional in doctorProfessionalList"
                                            :key="doctorProfessional.id"
                                            :label="doctorProfessional.dicName"
                                            :value="doctorProfessional.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="简介" prop="doctorSummary" style="width: 70%">
                        <el-input type="textarea" v-model="ruleForm.doctorSummary" placeholder="请输入简介" type="textarea"
                                  maxlength="1000"
                                  show-word-limit
                                  @keyup.native="chinese"></el-input>
                    </el-form-item>
                    <el-form-item label="擅长" prop="doctorGoodat" style="width: 70%">
                        <el-input type="textarea" v-model="ruleForm.doctorGoodat" placeholder="请输入擅长" type="textarea"
                                  maxlength="1000"
                                  show-word-limit
                                  @keyup.native="chinese"></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <el-button type="primary" @click="deleteImage('ruleForm')">清除头像</el-button>
                    </el-form-item>
                </el-form>
            </el-container>
            <el-container style="margin-left: -360px">
                <el-upload
                        class="avatar-uploader"
                        action="#"
                        :show-file-list="false"
                        :disabled="isEdit"
                        :on-success="handleAvatarSuccess"
                        :http-request="uploadHead"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-container>
        </el-container>

    </el-dialog>
    <div>
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="cellStyle"
                    :row-class-name="tableRowClassName"
                    @current-change="handleCurrentChange"
                    :max-height="tableHeight"
                    border
                    ref="table"
                    size="mini">
                <el-table-column
                        fixed
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="doctorName"
                        label="医生姓名"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="doctorCode"
                        label="编码"
                        :formatter="formatterDoctorCode"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="doctorSex"
                        label="性别"
                        width="60">
                </el-table-column>

                <el-table-column
                        prop="hospitalId"
                        label="所属医院"
                        sortable
                        :formatter="formatterHospital"
                        width="120">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="depId"
                        label="所属科室"
                        sortable
                        :formatter="formatterDep"
                        width="100">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="doctorProfessional"
                        label="医生职称"
                        :formatter="formatterProfessional"
                        width="80">
                </el-table-column>



                <el-table-column
                        prop="doctorSummary"
                        label="简介"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="doctorGoodat"
                        label="擅长"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="300">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="timeStamp"
                        label="更新时间"
                        width="200">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="updateStatus"
                        label="更新状态"
                        :show-overflow-tooltip="true"
                        width="200">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="180">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="editRow(scope.$index,scope.row)"
                                type="primary"
                                size="mini" :disabled="scope.row.status==1" circle>
                            修改
                        </el-button>
                        <el-button
                                @click.native.prevent="uploadbyid(scope.$index,scope.row)"
                                type="primary"
                                size="mini"  circle>
                            上传
                        </el-button>
                        <el-tooltip content="绿色同步HIS数据 红色停止同步HIS数据" placement="top">
                            <el-switch
                                    v-model="scope.row.sync=='0'"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    @change="deleteRow(scope.$index,scope.row)"
                            >
                            </el-switch>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <div id="page">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentPageChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>

</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                imageUrl: '',
                isEdit: false,
                file: null,
                tableData: [],
                currentPage: 1,
                pageSize:  15,
                totalPage: 1,
                total:1000,
                hospitalId: JSON.parse(localStorage.getItem("user")).hospitalId,
                scrollDistance: 0,
                tableHeight: 100,
                doctorName: "",
                status: "0",
                sync: 0,
                loading: false,
                currentUpRow: null,
                hospitals: [],
                departments: [],
                doctorDocGrades: [],
                doctorSpecialities: [],
                doctorProfessionalList: [],
                ruleForm: {
                    birthday: '',
                    depId: "",
                    doctorDocGrade: null,
                    doctorGoodat: "",
                    doctorName: "",
                    doctorPracticeCode: "",
                    doctorPracticeDivision: "",
                    doctorPracticeScope: "",
                    doctorProfessional: "",
                    doctorQualificationCode: "",
                    doctorSex: "",
                    doctorSpeciality: "",
                    doctorSummary: "",
                    hospitalId: null,
                    id: null,
                    patIdentityNum: "",
                    status: "0",
                    imageUrl: "",
                    timeStamp: null
                },
                rules: {
                    doctorName: [
                        {required: true, message: '请输入医生名称', trigger: 'blur'},
                        {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
                    ],
                    depId: [
                        {required: true, message: '请选择科室名称', trigger: 'change'}
                    ],
                    hospitalId: [
                        {required: true, message: '请选择医院名称', trigger: 'change'}
                    ],
                    doctorProfessional: [
                        {required: true, message: '请选择医生职称', trigger: 'change'}
                    ],
                    doctorSex: [
                        {required: true, message: '请选择医生性别', trigger: 'change'}
                    ]
                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '120px'
            }
        },
        methods: {
            chinese: function () {
                this.doctorName = this.doctorName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.doctorName = this.ruleForm.doctorName.replace(/[^\u4E00-\u9FA5]/g, '');
                this.ruleForm.doctorSummary = this.ruleForm.doctorSummary.replace(/\s+/g, '');
            },
            dictInit: function () {
                axios.post("http://" + window.location.host + '/hospital/select_list', {
                    hosName: '', hospitalId: this.hospitalId
                }).then(res => {
                    this.hospitals = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });
                axios.post("http://" + window.location.host + '/pubDepartments/select_list', {
                    depName: '', status: 0, hospitalId: this.hospitalId
                }).then(res => {
                    this.departments = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });
                axios.post("http://" + window.location.host + '/pubDictionary/select_list', {
                    dicType: 32
                }).then(res => {
                    this.doctorDocGrades = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });

                axios.post("http://" + window.location.host + '/pubDictionary/select_list', {
                    dicType: 13
                }).then(res => {
                    this.doctorProfessionalList = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });
                axios.post("http://" + window.location.host + '/pubDictionary/select_list', {
                    dicType: 11
                }).then(res => {
                    this.doctorSpecialities = res.data.data;
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });
            },
            lazyLoad() {
                //当前页自增长
                let statusTemp;
                if (this.status == 2 || this.status == "2") {
                    statusTemp = ""
                } else {
                    statusTemp = this.status;
                }
                let params = [{name: 'sync', value: this.sync==true?"1":"0"}, {name: 'status', value: statusTemp}, {
                    name: 'doctorName',
                    value: this.doctorName
                }, {name: 'hospitalId', value: this.hospitalId}]
                axios.post("http://" + window.location.host + '/pubDoctor/select_list_Page',
                    {"pageNum": this.currentPage, "pageSize": this.pageSize, "params": params}
                ).then(res => {
                    //将请求回来的数据和当前展示的数据合并在一起
                    this.tableData = res.data.data.content;
                }).catch((error) => {
                    this.$message({
                        type: 'success',
                        message: error.response.data.message
                    });
                });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentPageChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.lazyLoad()
            },
            init: function () {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let statusTemp;
                if (this.status == 2 || this.status == "2") {
                    statusTemp = ""
                } else {
                    statusTemp = this.status;
                }
                if (this.hospitalId == 0) {
                    this.hospitalId = null;
                }
                let params = [{name: 'sync', value: this.sync==true?"1":"0"}, {name: 'status', value: statusTemp}, {
                    name: 'doctorName',
                    value: this.doctorName
                }, {name: 'hospitalId', value: this.hospitalId}]
                axios.post("http://" + window.location.host + '/pubDoctor/select_list_Page', {
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "params": params
                }).then(res => {
                    this.tableData = res.data.data.content;
                    this.totalPage = res.data.data.totalPage
                    this.total = res.data.data.totalSize
                }).catch((e) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: "获取数据失败"
                    });
                });

                loading.close()
            },
            extractHisData: function () {
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                axios.post("http://" + window.location.host + '/pubDoctor/extractHisData', {}).then(res => {
                    this.init()
                    loading.close();
                    if (res.data.code == 500) {
                        this.$message({
                            showClose: true,
                            type: 'error',
                            message: res.data.msg
                        });
                    } else {
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: "获取医生信息成功！"
                        });
                    }
                }).catch((error) => {
                    loading.close();
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: error.response.data.message
                    });
                });
            },
            jktUpload:function () {
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = new URLSearchParams()
                if (this.hospitalId == null) {
                    this.hospitalId = 0;
                }
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/pubDoctor/jktUpload', params).then(res => {
                    if (res.data.code == 200 || res.data.code == '200') {
                        this.init()
                        this.$message({
                            showClose: true,
                            type: 'success',
                            message: res.data.msg
                        });
                    }else {
                        this.$alert(res.data.msg.split(";").join("<br>"), '提示', {
                            confirmButtonText: '确定',
                            callback: action => {

                            }
                        })
                    }
                    loading.close();
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: error.response.data.message
                    });
                });
                loading.close();
            },
            upload: function () {
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = new URLSearchParams()
                if (this.hospitalId == null) {
                    this.hospitalId = 0;
                }
                params.append("hospitalId", this.hospitalId)
                axios.post("http://" + window.location.host + '/pubDoctor/upload', params).then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "上传到省平台成功！"
                    });
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: error.response.data.message
                    });
                });
                loading.close();
            },
            uploadbyid: function (index, row) {
                let loading = this.$loading({
                    lock: true,
                    text: '数据处理中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let params = new URLSearchParams()
                if (this.hospitalId == null) {
                    this.hospitalId = 0;
                }
                params.append("id", row.id)
                axios.post("http://" + window.location.host + '/pubDoctor/uploadByID', params).then(res => {
                    this.$message({
                        showClose: true,
                        type: 'success',
                        message: "上传到省平台成功！"
                    });
                }).catch((error) => {
                    this.$message({
                        showClose: true,
                        type: 'error',
                        message: error.response.data.message
                    });
                });
                loading.close();
            },
            handleCurrentChange(val) {
                this.currentUpRow = val;
            },
            formatterDep: function (row, column) {
                for (let i = 0; i < this.departments.length; i++) {
                    if (row.depId == this.departments[i].id) {
                        return this.departments[i].depName
                    }
                }
            },
            formatterProfessional: function (row, column) {
                for (let i = 0; i < this.doctorProfessionalList.length; i++) {
                    if (row.doctorProfessional == this.doctorProfessionalList[i].id) {
                        return this.doctorProfessionalList[i].dicName
                    }
                }
            },
            formatterDocGrade: function (row, column) {
                for (let i = 0; i < this.doctorDocGrades.length; i++) {
                    if (row.doctorDocGrade == this.doctorDocGrades[i].id) {
                        return this.doctorDocGrades[i].dicName
                    }
                }
            },
            formatterHospital: function (row, column) {
                for (let i = 0; i < this.hospitals.length; i++) {
                    if (row.hospitalId == this.hospitals[i].id) {
                        return this.hospitals[i].hosName
                    }
                }
            },
            formatterDoctorCode: function (row,column){
                if (row.doctorCode.slice(0,1)=="D" || row.doctorCode.slice(0,1)=="H"){
                    return row.doctorCode.slice(1);
                }
                return row.doctorCode;
            },
            formatterSpeciality: function (row, column) {
                for (let i = 0; i < this.doctorSpecialities.length; i++) {
                    if (row.doctorSpeciality == this.doctorSpecialities[i].id) {
                        return this.doctorSpecialities[i].dicName
                    }
                }
            },
            closeDiglog: function () {
                this.imageUrl = "";
                this.isEdit = true
                return this.ruleForm = {
                    birthday: "",
                    depId: "",
                    doctorDocGrade: null,
                    doctorGoodat: "",
                    doctorName: "",
                    doctorPracticeCode: "",
                    doctorPracticeDivision: "",
                    doctorPracticeScope: "",
                    doctorProfessional: "",
                    doctorQualificationCode: "",
                    doctorSex: "",
                    doctorSpeciality: "",
                    doctorSummary: "",
                    hospitalId: null,
                    id: null,
                    patIdentityNum: "",
                    status: "0",
                    imageUrl: "",
                    timeStamp: null
                }
            },
            formatterSex: function (row, column) {
                if (row.doctorSex == 1 || row.doctorSex == '1') {
                    return "男"
                } else {
                    return "女"
                }
            },
            submitForm: function (ruleForm) {
                this.$refs[ruleForm].validate((valid) => {
                    if (valid) {
                        let url = '/pubDoctor/createDoctor';
                        if (this.ruleForm.id) {
                            url = '/pubDoctor/updateDoctor';
                        }
                        axios.post("http://" + window.location.host + url, this.ruleForm).then(res => {
                            this.$refs[ruleForm].resetFields();
                            this.$message({
                                type: 'success',
                                message: '操作成功!'
                            });
                            this.dialogFormVisible = false
                            this.init()
                        }).catch(function (error) {
                            alert(error.response.data.message)

                        });
                    } else {
                        return false;
                    }
                });

            },
            handleAvatarSuccess(res, file) {
                if (this.imageUrl == undefined || this.imageUrl == null || this.imageUrl == "") {
                    this.imageUrl = URL.createObjectURL(file.raw);
                }
            },
            deleteImage(ruleForm){
                axios.post("http://" + window.location.host + '/pubDoctor/deleteImage', this.ruleForm).then(res => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    this.imageUrl = "";
                    this.ruleForm.imageUrl=""
                }).catch(function (error) {
                    alert(error.response.data.message)
                });
            },
            uploadHead(file) {
                let imgFile = new FormData();
                imgFile.append('file', file.file);//传文件
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }; //添加请求头
                axios.post("http://" + window.location.host + '/pubDoctor/imageUpload', imgFile, config
                ).then(res => {
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                    if (res.data) {
                        this.imageUrl = "http://" + window.location.host + "/" + res.data;
                    }
                    this.init()
                }).catch(function (error) {
                    alert(error.response.data.message)
                });
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 < 255;
                if (!isJPG) {
                    this.$message({
                        type: 'info',
                        message: '上传头像图片只能是 JPG 格式!'
                    });
                }
                if (!isLt2M) {
                    this.$message({
                        type: 'info',
                        message: '上传头像图片大小不能超过 255kb!'
                    });
                }
                this.file = file;
                return isJPG && isLt2M;
            },
            createDepartment: function () {
                let params = new URLSearchParams();
                params.append('startDate', startDate);
                params.append('endDate', endDate);
                axios.post("http://" + window.location.host + '/pubDoctor/select_list', params).then(res => {
                    if (res.status == 500 || res.status == '500') {
                        alert(res.message);
                    }
                }).catch(function (error) {
                    loading.close();
                    alert(error.response.data.message)
                });
            },
            deleteRow: function (index, row) {
                this.$confirm('请谨慎操作，可能导致医生排班预约异常, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let sync = row.sync == '0' ? '1' : '0'
                    let msg;
                    if (sync == '1') {
                        msg = '停止同步HIS数据'
                    } else {
                        msg = '恢复同步HIS数据'
                    }
                    axios.post("http://" + window.location.host + '/pubDoctor/update_by_primary_key_selective',
                        {'id': row.id, 'sync': sync}
                    ).then(res => {
                        this.init()
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });
                });
            },
            editRow: function (index, row) {
                this.ruleForm = row;
                if (row.imageUrl != null && row.imageUrl != '') {
                    this.imageUrl = "http://" + window.location.host + "/" + row.imageUrl;
                }else {
                    this.imageUrl ="";
                }
                this.isEdit = false
                this.dialogFormVisible = true
            },
            //设置指定行、列、具体单元格颜色
            cellStyle: function ({row, column, rowIndex, columnIndex}) {
                if ((row.sync == 1 || row.sync == '1') && columnIndex==1) {
                    return 'background-color: #E6A23C' //rgb(105,0,7)
                } else {
                    return '' //rgb(105,0,7)
                }
            },
            tableRowClassName({row, rowIndex}) {
                if (row.status == 1 || row.status == '1') {
                    return 'error-row';
                } else if (row.status == 0 || row.status == '0') {
                    return '';
                }
                return '';
            }
        },
        created() {
            this.dictInit();
            this.init();
            // this.total=this.tableData.length;
        },
        watch: {
            doctorName: function (newValue, oldValue) {
                this.dictInit();
                this.init();
            },
            status: function (newValue, oldValue) {
                // 0. 刷新后重置滚动距离
                this.dictInit();
                this.init();
            },
            pageSize:function (newValue, oldValue) {
                this.lazyLoad()
            },
            'ruleForm.hospitalId': function (val, oldval) {
                if (val != oldval && oldval != null) {
                    if (val != null && val != undefined) {
                        axios.post("http://" + window.location.host + '/pubDepartments/select_list', {
                            hospitalId: val
                        }).then(res => {
                            this.departments = res.data.data;
                        }).catch((e) => {
                            alert('获取数据失败');
                        });
                        this.ruleForm.depId = ""
                    }
                }

            }
        },
        mounted:function(){
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 80;
                // 监听窗口大小变化
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - 80
                }
            })
            //this.$refs.table.$el.offsetTop：表格距离浏览器的高度
            //100表示你想要调整的表格距离底部的高度（你可以自己随意调整），因为我们一般都有放分页组件的，所以需要给它留一个高度　
        }
    });
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 140px;
        height: 140px;
        line-height: 140px;
        text-align: center;
    }

    .avatar {
        width: 140px;
        height: 140px;
        display: block;
    }
</style>

</html>
